Getting started
Guide d’installation pour les systèmes d’exploitation Ubuntu. (Documentation officielle de React Native)
Environnement de développement
Installer NodeJS
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
Pour vérifier la version de Node installée, il suffit d’exécuter node --version.
Une fois NodeJS installé, npm est disponible. On peut vérifier sa version avec npm -version.
Ce projet est basé sur la version de Node 16.x
Installer Java 11
Ce projet nécessite java 11. Pour vérifier votre version de java, il faut exécuter la commande java -version.
sudo apt install openjdk-11-jre-headless
Mise en place de l’environnement Android
La première étape est de télécharger Android Studio pour gérer les SDK et les émulateurs.
Il faut ensuite configurer des variables d’environnement.
export ANDROID_SDK_ROOT=$HOME/<Path to Android folder>/Android/Sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
Pour appliquer ses changements, il faut ensuite exécuter la commande source .bashrc. Cela met à jour les chemins, il est possible de vérifier que le processus a fonctionné avec la commande echo $ANDROID_SDK_ROOT.
La prochaine étape est de configurer un émulateur si nécessaire avec l’outil Virtual Device Manager d’Android Studio.
Configuration de l’application
Un fichier de configuration rapide app.config.js est à votre disposition pour définir facilement certains éléments de l’application.
Les configurations prises en considération sont :
- testInstanceConfig: L’instance de test permettant de remplir automatiquement en mode debug les champs url, username et password de la page de connexion.
- releaseInstanceConfig: La configuration d’instance pour le mode release. Cette configuration permettant de remplir automatiquement l’url sur la page de connexion mais également de cacher l’input d’url dans le cas où le client ne souhaite pas que les utilisateurs puissent la modifier.
- defaultLanguage: La langage par défaut pour tous les utilisateurs. Cette configuration permet de définir la langue par défaut de l’application. Cependant, cette valeur est surchargée par la langue par défaut de l’utilisateur paramétrée sur l’ERP. La langue par défaut de l’application en anglais
- defaultRequestLimit: Le nombre d’élément récupéré par requête par défaut. Cette valeur peut être surchargée sur les écritures des requêtes si nécessaire. Sa valeur par défaut est 10.
Un example de fichier de configuration :
export const app_config = {
/*
* This configuration is used to fill in the url,
* username and/or password fields automatically
* when the application is running in debug mode
*/
testInstanceConfig: {
defaultUrl: '',
defaultUsername: '',
defaultPassword: '',
},
/*
* This configuration is used to fill in the url field
* automatically when the application is running in release mode.
* It is also possible to hide the url input if needed
* to prevent users from changing it.
*/
releaseInstanceConfig: {
url: '',
showUrlInput: true,
},
/*
* This setting is used to define the default language of the application.
* This value is automatically overwritten by the user's default language
* once logged in if the latter is set.
*/
defaultLanguage: 'en',
/*
* This setting is used to define the default request limit used is
* createStandardSearch function (that is to say the number of elements
* per page on list screens). This value can be rewritten for any request
* using props numberElementsByPage
*/
defaultRequestLimit: 10,
};
Démarrer le projet
Ajouter ou retirer un module métier pour la génération d’APK
Les modules peuvent être activés ou desactivés directement depuis le fichier App.js du dossier example ou alors depuis le module de configuration Axelor mobile settings d’AOS disponible à partir de la version 7.0.0.
Pour gérer les modules directement depuis le composant Application, il suffit d’ajouter ou de retirer un objet Module de l’attribut modules.
import React from 'react';
import {Application} from '@axelor/aos-mobile-core';
import {StockModule} from '@axelor/aos-mobile-stock';
import {ManufacturingModule} from '@axelor/aos-mobile-manufacturing';
import application_properties from '../package.json';
const App = () => {
return (
<Application
modules={[StockModule, ManufacturingModule]}
mainMenu="auth_menu_user"
version={application_properties.version}
/>
);
};
export default App;
Commandes importantes
- Install dependencies :
yarn clean && yarn - Build packages :
yarn build - Install debug android APK :
yarn android - Start Metro for development :
yarn start - Create release APK :
cd example/android && ./gradlew app:assembleRelease - Create release App bundle :
cd example/android && ./gradlew app:bundleRelease